{template 'common/header'}
<style>
    html, body {
        font-size: 14px;
    }

    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    div, ul, li {
        box-sizing: border-box;
    }

    .nav {
        background: #d70010;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        padding: 10px 2.5%;
        width: 100%;
    }

    .nav-floor {
        font-size: 1.2em;
        width: 20%;
        border: 1px solid #d70010;
        text-align: center;
    }

    .nav-floor span {
        color: #FFFFFF;
        background: #d70010;
        padding: 5px 6px;
        border-radius: 50%;
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 24px;
    }

    .nav-focus span {
        color: #d70010;
        background: #FFFFFF;
    }

    .brand {
        width: 100%;
    }

    .brand-list {
        width: 100%;
        border-top: 10px solid #efefef;
    }

    .brand-info {
        margin-bottom: 5px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        padding: 10px 5%;
        border-bottom: 1px solid #d0d0d0;
    }

    .brand-logo {
        width: 20%;
        margin-right: 3%;
    }

    .brand-logo img {
        width: 100%;
    }

    .brand-name {
        font-size: 1.2em;
        line-height: 67px;
        width: 50%;
    }
    .brand-name a{
        color: #000;
    }
    .brand-loc {
        float: right;
        line-height: 67px;
        color: #888;
        font-size: 0.8em;
        margin-left: 4%;
    }
    .hidden{
        display: none;
    }
</style>
<script>
    function loadBrand(o, t) {
        var floor = o;
        $(t).addClass('nav-focus').siblings().removeClass('nav-focus');
        $('#'+floor).removeClass('hidden').siblings().addClass('hidden');

    }
</script>
<div class="brand-box">
    <div class="nav">
        <div class="nav-floor" onclick="loadBrand('B1',this)">
            <span>B1</span>
        </div>
        <div class="nav-floor nav-focus" onclick="loadBrand('F1',this)">
            <span>1F</span>
        </div>
        <div class="nav-floor" onclick="loadBrand('F2',this)">
            <span>2F</span>
        </div>
        <div class="nav-floor" onclick="loadBrand('F3',this)">
            <span>3F</span>
        </div>
        <div class="nav-floor" onclick="loadBrand('F4',this)">
            <span>4F</span>
        </div>
    </div>


    {data module="site" func="site_article" cid="$cid" assign="result" return="true"}


    <div class="brand">
        <ul class="brand-list hidden" id="B1">
            {loop $result['list'] $row}
                {php $arr = json_decode($row['article_attrs'],true)}
                {if $arr['街区位置'] == '街区B1'}
                    <li class="brand-info">

                        <div class="brand-logo">
                            <img src="{php echo tomedia($row['brandlogo'])}" alt="">
                        </div>
                        <div class="brand-name"><a href="{$row['linkurl']}">{php echo cutstr($row['title'],40,1);}</a></div>
                        <div class="brand-loc">{$arr['街区位置']}{$arr['店铺位置']}</div>

                    </li>
                {/if}
            {/loop}
        </ul>

        <ul class="brand-list" id="F1">
            {loop $result['list'] $row}
                {php $arr = json_decode($row['article_attrs'],true)}
                {if $arr['街区位置'] == '街区1F'}
            <li class="brand-info">

                        <div class="brand-logo">
                            <img src="{php echo tomedia($row['brandlogo'])}" alt="">
                        </div>
                        <div class="brand-name"><a href="{$row['linkurl']}">{php echo cutstr($row['title'],40,1);}</a></div>
                        <div class="brand-loc">{$arr['街区位置']}{$arr['店铺位置']}</div>
            </li>
                {/if}
            {/loop}
        </ul>

        <ul class="brand-list hidden" id="F2">
            {loop $result['list'] $row}
                {php $arr = json_decode($row['article_attrs'],true)}
                {if $arr['街区位置'] == '街区2F'}
            <li class="brand-info">

                        <div class="brand-logo">
                            <img src="{php echo tomedia($row['brandlogo'])}" alt="">
                        </div>
                        <div class="brand-name"><a href="{$row['linkurl']}">{php echo cutstr($row['title'],40,1);}</a></div>
                        <div class="brand-loc">{$arr['街区位置']}{$arr['店铺位置']}</div>

            </li>
                {/if}
            {/loop}
        </ul>

        <ul class="brand-list hidden" id="F3">
            {loop $result['list'] $row}
                {php $arr = json_decode($row['article_attrs'],true)}

                {if $arr['街区位置'] == '街区3F'}
            <li class="brand-info">

                        <div class="brand-logo">
                            <img src="{php echo tomedia($row['brandlogo'])}" alt="">
                        </div>
                <div class="brand-name"> <a href="{$row['linkurl']}">{php echo cutstr($row['title'],40,1);}</a></div>
                        <div class="brand-loc">{$arr['街区位置']}{$arr['店铺位置']}</div>
                    </a>
            </li>
                {/if}
            {/loop}
        </ul>

        <ul class="brand-list hidden" id="F4">
            {loop $result['list'] $row}
            {php $arr = json_decode($row['article_attrs'],true)}
            {if $arr['街区位置'] == '街区4F'}
            <li class="brand-info">

                    <div class="brand-logo">
                        <img src="{php echo tomedia($row['brandlogo'])}" alt="">
                    </div>
                <div class="brand-name"><a href="{$row['linkurl']}">{php echo cutstr($row['title'],40,1);}</a></div>
                    <div class="brand-loc">{$arr['街区位置']}{$arr['店铺位置']}</div>
                </a>
            </li>
            {/if}
            {/loop}
        </ul>
    </div>
</div>
